<template>
  <div class="dashboard-container">
    <p>更新提醒：解决 三级路由（菜单） 关闭后，重新进入该路由（菜单） 还是缓存状态的bug,大家进入腾讯课堂重新下载附件源码！</p>
    <el-card class="card">
      <div class="dashboard-text">
        <div style="font-size:45px">累计访问人次：{{count}}</div>
        <div>欢迎大家学习vue权限动态路由</div>
        <div>vx:1115009958</div>
        <div style="font-size:45px">
          <a href="https://ke.qq.com/course/3067789?tuin=4275b3a6" target="_blank" rel="noopener noreferrer">前端视频教程地址点我</a>
        </div>
        <div style="font-size:45px">
          <a href="https://ke.qq.com/course/3100114?tuin=4275b3a6" target="_blank" rel="noopener noreferrer">后端视频教程地址点我</a>
        </div>
        <div>
          <span style="font-size:45px">加微信拉你进答疑群，手把手指导，包教包会</span></span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getUv } from "@/api/index";
import { get } from 'js-cookie';
export default {
  name: "Dashboard",
  data() {
    return {
      count: 0
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {
    async getUv() {
      let res = await getUv()
      this.count = res.data
    }
  },
  mounted() {
    this.getUv()
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    background: #eee;
    height: 86vh;
  }
  &-text {
    font-size: 60px;
    line-height: 80px;
    font-weight: 600;
    font-family: "黑体";
    color: #8c888b;
    background: -webkit-linear-gradient(45deg, #4ef3fc, #fbd7c6, #fdefac, #bfb5dd, #4c96ff);
    color: transparent;
    /*设置字体颜色透明*/
    background-clip: text;
    /*背景裁剪为文本形式*/
    animation: ran 10s linear infinite;
    /*动态10s展示*/
  }
}
@keyframes ran {
  from {
    backgroud-position: 0 0;
  }
  to {
    background-position: 2000px 0;
  }
}
</style>
